<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>消息通知</title>
    <link rel="stylesheet" type="text/css" href="__CSS__/aui.css"/>
    <link rel="stylesheet" type="text/css" href="__CSS__/api.css"/>
    <link rel="stylesheet" type="text/css" href="__CSS__/dropload.css" />
    <style>
        body {

            background-color: #fff;

        }

        .rforliji {
            padding-left: 0.8rem;
            padding-right: 0.8rem;
            padding-top: 15px;
        }

        .title {
            font-size: 0.8rem;
            color: #404040;
        }

        .title::before {
            content: "";
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background-color: #4DC556;
            display: inline-block;
            margin-right: 0.75rem;
        }

        .liji img {
            width: 0.8rem;
            height: 0.8rem;
            vertical-align: middle;
            display: inline-block;
        }

        .content {
            font-size: 0.7rem;
            color: #555555;
            margin-top: 0.75rem;
        }

        .time {
            height: 33px;
            line-height: 33px;
            padding: 0 0.8rem;
        }

        .time div:first-child {
            font-size: 0.6rem;
            color: #B7B7B7;
        }

        .time div:nth-child(2) {
            font-size: 0.6rem;
            color: #B7B7B7;
        }

        .time div:nth-child(3) img {
            width: 7px;
            height: 13px;
            vertical-align: inherit;
            display: inline-block;
            margin-left: 0.5rem;
        }

        .line {
            height: 0.25rem;
        }
    </style>
    <style>
        .aui-iconfont {
            position: relative;
            font-family: "aui_iconfont" !important;
            font-size: 0.7rem;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            height: 2.4rem;
        }

        .aui-icon-tu {
            height: 2.4rem;
            width: 49px;
            background: url('__IMG__/left.png') no-repeat 0.5rem center;
            background-size: 10px 17px;
        }

        .aui-bar-nav .aui-title {
            font-size: 0.85rem;
            color: #000;
        }

        .aui-bar-nav .aui-pull-right {
            padding-right: 0.75rem;
        }

        .aui-bar-nav {
            margin-bottom: 5px;
        }

        .aui-active {
            border-bottom: none !important;
            position: relative;
        }

        .aui-active:after {
            content: '';
            display: block;
            height: 0px;
            width: 34px;
            /*border-radius: 50%;*/
            border-top: 1px solid #E76A39;
            bottom: 0px;
            position: absolute;
            left: 39.5%;

        }

        .sss {
            margin: 0 15px;
            width: 100%;
            border: 1px solid #F04040;
        }

        .aui-tab-item {
            height: 1.7rem;
            line-height: 1.7rem;
        }

        .middle {
            border-left: 1px solid #F04040;
            border-right: 1px solid #F04040;
        }

        /*.dot {*/
            /*width: 0.8rem;*/
            /*line-height: 0.8rem;*/
            /*text-align: center;*/
            /*background: #FF5852;*/
            /*border-radius: 50%;*/
            /*position: absolute;*/
            /*top: 2px;*/
            /*left: 60.5%;*/
            /*font-size: 0.575rem;*/
            /*color: #fff;*/
            /*font-weight: 500;*/
            /*z-index: 9999999;*/
        /*}*/
        .redbai{
            color: #FFF;
            background-color: #FF5852;
        }
    </style>
</head>
<body>
<header class="aui-bar aui-bar-nav">
    <a class="aui-pull-left" onclick="window.history.back(-1);"> <span class="aui-iconfont aui-icon-tu"> </span> </a>
    <div class="aui-title">通知</div>
</header>
<div class="aui-tab bar">
    <div class="underLine sss aui-tab bar nav" id="tab">
        <div class="aui-tab-item redbai" name="1">
            系统消息
            <div class="dot" id="honggg1"></div>
        </div>
        <div class="aui-tab-item middle" name="2">
            个人消息
            <div class="dot" id="honggg2"></div>
        </div>
    </div>
</div>
<div class="seat {if $data}hidden{/if}" id="seatAll">
    <img src="__IMG__/quexing/no_content.png" class="seatImg"/>
    <div class="seatName">没有符合条件的内容</div>
</div>
<div class="upOrDown">
    <div class="upOrDown_data">
        {volist name='data' id='d'}
        <div id="all_{$d.n_id}">
            <div class="rforliji underLine">
                <div class="flex-wrap liji">
                    <div class="flex-con title">系统消息</div>
                    <div onclick="delectOne(this)" n_id="{$d.n_id}"><img src="__IMG__/del1.png" alt=""/></div>
                </div>
                <p class="content">{$d.n_title ?? ''}</p>

            </div>
            <div class="time flex-wrap">
                <div class="flex-con">{$d.n_time ?? ''}</div>
                <div onclick="openOne(this)" n_id="{$d.n_id}">查看详情</div>
                <div><img src="__IMG__/right_arrow.png" alt=""/></div>
            </div>
            <p class="line"></p>
        </div>
        {/volist}
    </div>
</div>
<input type="hidden" id="user_id" value="{$user_id}" />
<input type="hidden" id="type" value="1" />
</body>
<script type="text/javascript" src="__JS__/jquery.min.js"></script>
<script type="text/javascript" src="__JS__/dropload.min.js"></script>
<script type="text/javascript">
    var page = 1;
    $('.aui-tab-item').click(function () {
        var name = $(this).attr('name');
        $(this).addClass('redbai').siblings().removeClass('redbai');
        $('#type').val(name);
        var user_id = $('#user_id').val();
        var type = $('#type').val();
        page = 1;
        $.ajax({
            url:'{:url("Index/noticeList")}',
            data:'page='+page+'&user_id=' + user_id+'&type='+type,//
            type:'POST',
            dataType:'json',
            success: function(data){
                $('.upOrDown_data').empty();//
                var datas = data.msg;
                $.each(datas,function(key,v){
                    var xx = '系统消息';
                    if(type == 2){
                        xx = '个人消息';
                    }
                    $(".upOrDown_data").append('' +
                        '<div id="all_'+v.n_id+'">' +
                        '<div class="rforliji underLine">' +
                        '<div class="flex-wrap liji">' +
                        '<div class="flex-con title">'+xx+'</div>' +
                        '<div onclick="delectOne(this)" n_id="'+v.n_id+'">' +
                        '<img src="__IMG__/del1.png" alt=""/>' +
                        '</div>' +
                        '</div>' +
                        '<p class="content">'+v.n_title+'</p></div>' +
                        '<div class="time flex-wrap"><div class="flex-con">'+v.n_time+'</div>' +
                        '<div onclick="openOne(this)" n_id="'+v.n_id+'">查看详情</div>' +
                        '<div><img src="__IMG__/right_arrow.png" alt=""/>' +
                        '</div></div><p class="line"></p></div>');
                });
                dropload.unlock();
                dropload.noData(false);
                dropload.resetload();
            },
            error: function(){
                alert('Ajax error!');
            }
        });
    });
    function delectOne(el) {
        var nid = $(el).attr('n_id');
        var user_id = $('#user_id').val();
        if(confirm('确定删除此消息吗？')){
            $.ajax({
                url:'{:url("Index/delNotice")}',
                data: 'n_id='+nid+'&user_id='+user_id,//
                type:'POST',
                dataType:'JSON',
                success: function(returndata){
                    location.reload();
                },
                error:function () {
                    alert('Ajax error!');
                }
            })
        }
    }
    function openOne(el) {
        var nid = $(el).attr('n_id');
        var user_id = $('#user_id').val();
        location.href = '{:url("Index/noticeInfo")}?n_id='+nid+'&user_id='+user_id;
    }
    /**
     * 上拉加载，下拉刷新
     */
    var dropload = $('.upOrDown').dropload({
        scrollArea : window,
        autoLoad : true,
        loadDownFn : function(me){
            var user_id = $('#user_id').val();
            var type = $('#type').val();
            page++;
            $.ajax({
                url:'{:url("Index/noticeList")}',
                data:'page='+page+'&user_id=' + user_id+'&type='+type,//
                type:'POST',
                dataType:'JSON',
                success: function(data){
                    var arrLen = data.msg.length;
                    if(arrLen<=0){

                        me.lock();
//                         无数据
                        me.noData(true);
                        // 每次数据加载完，必须重置
                        me.resetload();
                    }else{
                        var datas = data.msg;
                        $.each(datas,function(key,v){
                            var xx = '系统消息';
                            if(type == 2){
                                xx = '个人消息';
                            }
                            $(".upOrDown_data").append('' +
                                '<div id="all_'+v.n_id+'">' +
                                '<div class="rforliji underLine">' +
                                '<div class="flex-wrap liji">' +
                                '<div class="flex-con title">'+xx+'</div>' +
                                '<div onclick="delectOne(this)" n_id="'+v.n_id+'">' +
                                '<img src="__IMG__/del1.png" alt=""/>' +
                                '</div>' +
                                '</div>' +
                                '<p class="content">'+v.n_title+'</p></div>' +
                                '<div class="time flex-wrap"><div class="flex-con">'+v.n_time+'</div>' +
                                '<div onclick="openOne(this)" n_id="'+v.n_id+'">查看详情</div>' +
                                '<div><img src="__IMG__/right_arrow.png" alt=""/>' +
                                '</div></div><p class="line"></p></div>');
                        });
                        // 每次数据加载完，必须重置
                        me.resetload();
                    }
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        },
        loadUpFn : function(me){
            page = 1;
            var user_id = $('#user_id').val();
            var type = $('#type').val();
            $.ajax({
                url:'{:url("Index/noticeList")}',
                data:'page='+page+'&user_id=' + user_id+'&type='+type,//
                type:'POST',
                dataType:'json',
                success: function(data){
                    $('.upOrDown_data').empty();//
                    var datas = data.msg;
                    $.each(datas,function(key,v){
                        var hide = '';
                        if(v.read == 0){
                            hide = 'titlebefore';
                        }
                        var xx = '系统消息';
                        if(type == 2){
                            xx = '个人消息';
                        }
                        $(".upOrDown_data").append('' +
                            '<div id="all_'+v.n_id+'">' +
                            '<div class="rforliji underLine">' +
                            '<div class="flex-wrap liji">' +
                            '<div class="'+hide+' hongdian_'+v.n_id+'"></div>' +
                            '<div class="flex-con title">'+xx+'</div>' +
                            '<div onclick="delectOne(this)" n_id="'+v.n_id+'">' +
                            '<img src="__IMG__/del1.png" alt=""/>' +
                            '</div>' +
                            '</div>' +
                            '<p class="content">'+v.n_title+'</p></div>' +
                            '<div class="time flex-wrap"><div class="flex-con">'+v.n_time+'</div>' +
                            '<div onclick="openOne(this)" n_id="'+v.n_id+'">查看详情</div>' +
                            '<div><img src="__IMG__/right_arrow.png" alt=""/>' +
                            '</div></div><p class="line"></p></div>');
                    });
                    me.resetload();
                    me.unlock();
                    me.noData(false);
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    me.resetload();
                }
            });
        }
    });

</script>
</html>
